<template>
  <div id="app">
    <!-- <div class="row">
      <my-button @click="tip" disabled>hah</my-button>
      <my-button type="success">hah</my-button>
      <my-button type="info">信息按钮</my-button>
      <my-button type="warning">hah</my-button>
      <my-button type="primary">hah</my-button>
      <my-button type="danger">hah</my-button>
    </div>
    <div class="row">
      <my-button>hah</my-button>
      <my-button type="success" plain>hah</my-button>
      <my-button type="info" plain>信息按钮</my-button>
      <my-button type="warning" plain>hah</my-button>
      <my-button type="primary" plain>hah</my-button>
      <my-button type="danger" plain>hah</my-button>
    </div>
    <div class="row">
      <my-button>hah</my-button>
      <my-button icon="my-icon-apple" round type="success" plain>hah</my-button>
      <my-button icon="my-icon-apple" round type="info" plain
        >信息按钮</my-button
      >
      <my-button icon="my-icon-apple" round type="warning" plain>hah</my-button>
      <my-button icon="my-icon-apple" round type="primary" plain>hah</my-button>
      <my-button icon="my-icon-apple" round type="danger" plain>hah</my-button>
    </div>
    <div class="row">
      <my-button circle plain>信</my-button>
      <my-button circle type="success" plain>信</my-button>
      <my-button circle type="info" plain>信</my-button>
      <my-button circle type="warning" plain>信</my-button>
      <my-button circle type="primary" plain>信</my-button>
      <my-button circle type="danger" plain>信</my-button>
    </div>
    <div class="row">
      <my-button icon="my-icon-apple" circle plain></my-button>
      <my-button icon="my-icon-apple" circle type="success" plain></my-button>
      <my-button icon="my-icon-apple" circle type="info" plain></my-button>
      <my-button icon="my-icon-apple" circle type="warning" plain></my-button>
      <my-button icon="my-icon-apple" circle type="primary" plain></my-button>
      <my-button icon="my-icon-apple" circle type="danger" plain></my-button>
    </div> -->

    <!-- <my-button @click="visible = true">点击打开dialog</my-button>
    <my-dialog :visible.sync="visible">
      <ul>
        <li>124</li>
        <li>124</li>
        <li>124</li>
      </ul>
      <template v-slot:footer>
        <my-button type="primary" @click="close">确定</my-button>
        <my-button @click="close">取消</my-button>
      </template>
    </my-dialog> -->

    <!-- <my-input
      placeholder="请输入用户名"
      v-model="username"
      showPassword
    ></my-input> -->

    <!-- <my-switch
      v-model="active"
      active-color="red"
      inactive-color="green"
    ></my-switch> -->
    <!-- <my-radio label="0" v-model="gender">女</my-radio>
    <my-radio label="1" v-model="gender">男</my-radio>
    <my-radio-group v-model="gender">
      <my-radio label="0">女</my-radio>
      <my-radio label="1">男</my-radio>
    </my-radio-group> -->
    <!-- <my-checkbox v-model="active">是否选中</my-checkbox>
    <my-checkbox-group v-model="hobby">
      <my-checkbox label="吃饭"></my-checkbox>
      <my-checkbox label="睡觉"></my-checkbox>
      <my-checkbox label="打豆豆"></my-checkbox>
    </my-checkbox-group> -->
    <my-form :model="pink">
      <my-form-item label="用户">
        <my-input v-model="pink.say" placeholder="输入文字"></my-input>
      </my-form-item>
    </my-form>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      visible: true,
      username: "zs",
      active: false,
      gender: "1",
      hobby: ["吃饭"],
      pink: {
        say: "",
      },
    };
  },
  methods: {
    tip() {
      alert("123");
    },
    close() {
      this.visible = false;
    },
  },
};
</script>

<style lang="scss">
.row {
  margin-bottom: 20px;
  .my-button {
    margin-right: 20px !important;
  }
}
</style>
